import 'package:flutter/material.dart';
import '../global_config.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  Widget searchInput() {
    return Container(
      child: Row(
        children: [
          Container(
            child: FlatButton.icon(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: Icon(
                  Icons.arrow_back,
                  color: GlobalConfig.fontColor,
                ),
                label: Text('')),
            width: 60,
          ),
          Expanded(
              child: TextField(
            autofocus: true,
            decoration: InputDecoration.collapsed(
                hintText: "搜索内容",
                hintStyle: TextStyle(color: GlobalConfig.fontColor)),
          ))
        ],
      ),
      decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(4)),
          color: GlobalConfig.searchBackgroundColor),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: searchInput(),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                child: Text(
                  '热搜内容',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                ),
                margin: EdgeInsets.only(top: 16, left: 16, bottom: 16),
                alignment: Alignment.topLeft,
              ),
              Row(
                children: [
                  Container(
                    child: Chip(
                      label: FlatButton(
                        onPressed: () {},
                        child: Text(
                          '汽车关税下调',
                          style: TextStyle(color: GlobalConfig.fontColor),
                        ),
                      ),
                      backgroundColor: GlobalConfig.dark == true
                          ? Colors.white12
                          : Colors.black12,
                    ),
                    margin: EdgeInsets.only(left: 16, bottom: 16),
                    alignment: Alignment.topLeft,
                  ),
                  Container(
                    child: Chip(
                      label: FlatButton(
                        child: Text("**禁止上市",
                            style: TextStyle(color: GlobalConfig.fontColor)),
                      ),
                      backgroundColor: GlobalConfig.dark == true
                          ? Colors.white12
                          : Colors.black12,
                    ),
                    margin: EdgeInsets.only(left: 16, bottom: 16),
                    alignment: Alignment.topLeft,
                  )
                ],
              ),
              Row(
                children: [
                  Container(
                    child: Chip(
                      label: FlatButton(
                          onPressed: () {},
                          child: Text("小米10",
                              style: TextStyle(color: GlobalConfig.fontColor))),
                      backgroundColor: GlobalConfig.dark == true
                          ? Colors.white12
                          : Colors.black12,
                    ),
                    margin: EdgeInsets.only(left: 16, bottom: 16),
                    alignment: Alignment.topLeft,
                  ),
                  Container(
                    child: Chip(
                      label: FlatButton(
                        onPressed: () {},
                        child: Text(
                          "华为meta40",
                          style: TextStyle(color: GlobalConfig.fontColor),
                        ),
                      ),
                      backgroundColor: GlobalConfig.dark == true
                          ? Colors.white12
                          : Colors.black12,
                    ),
                    margin: EdgeInsets.only(left: 16, bottom: 16),
                    alignment: Alignment.topLeft,
                  )
                ],
              ),
              Container(
                child: Text(
                  "搜索历史",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                ),
                margin: EdgeInsets.only(left: 16, bottom: 16),
                alignment: Alignment.topLeft,
              ),
              // 搜索历史Item
              Container(
                child: Row(
                  children: [
                    Container(
                      child: Icon(
                        Icons.access_time,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                      margin: EdgeInsets.only(right: 12),
                    ),
                    Expanded(
                        child: Container(
                      child: Text(
                        "麒麟芯片",
                        style: TextStyle(
                            color: GlobalConfig.fontColor, fontSize: 14),
                      ),
                    )),
                    Container(
                      child: Icon(
                        Icons.clear,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                    )
                  ],
                ),
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                padding: EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                    border: BorderDirectional(
                        bottom: BorderSide(
                            color: GlobalConfig.dark == true
                                ? Colors.white12
                                : Colors.black12))),
              ),
              Container(
                child: Row(
                  children: [
                    Container(
                      child: Icon(
                        Icons.access_time,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                      margin: EdgeInsets.only(right: 12),
                    ),
                    Expanded(
                        child: Container(
                      child: Text(
                        "麒麟芯片",
                        style: TextStyle(
                            color: GlobalConfig.fontColor, fontSize: 14),
                      ),
                    )),
                    Container(
                      child: Icon(
                        Icons.clear,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                    )
                  ],
                ),
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                padding: EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                    border: BorderDirectional(
                        bottom: BorderSide(
                            color: GlobalConfig.dark == true
                                ? Colors.white12
                                : Colors.black12))),
              ),
              Container(
                child: Row(
                  children: [
                    Container(
                      child: Icon(
                        Icons.access_time,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                      margin: EdgeInsets.only(right: 12),
                    ),
                    Expanded(
                        child: Container(
                      child: Text(
                        "麒麟芯片",
                        style: TextStyle(
                            color: GlobalConfig.fontColor, fontSize: 14),
                      ),
                    )),
                    Container(
                      child: Icon(
                        Icons.clear,
                        color: GlobalConfig.fontColor,
                        size: 16,
                      ),
                    )
                  ],
                ),
                margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                padding: EdgeInsets.only(bottom: 10),
                decoration: BoxDecoration(
                    border: BorderDirectional(
                        bottom: BorderSide(
                            color: GlobalConfig.dark == true
                                ? Colors.white12
                                : Colors.black12))),
              )
            ],
          ),
        ),
      ),
    );
  }
}
